<template>
    <div id="houseMap">
        <!--<div class="mapHouseMsg">-->
        <!--<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png">-->
        <!--<div>-->
        <!--124566666666664325-->
        <!--</div>-->
        <!--</div>-->
        <div v-if="areaModuleShow" v-for="item in areaCoordinate" :key="item.area" class='areaSelector' :style="item.style" @click="selected.area = item.area"><span>{{item.area}}</span></div>
        <transition name="barChange">
            <div id="houseNav" v-show="!transferShow">
                <div id="searchBar">
                    <div id="searchBarContent">
                        <input type="text" v-model="selected.keywords" placeholder="输入小区或地址搜索房源"/>
                        <button class="el-icon-search" @click="refreshMsg"></button><br>
                        <span>广州市</span>
                        <el-select v-model="selected.area" placeholder="区域"  size ="small">
                            <el-option v-for="item in areaList" :key="item.area" :value="item.area"></el-option>
                        </el-select><br/>
                        <el-select v-model="selected.price" placeholder="租金"  size ="small">
                            <el-option v-for="item in priceList" :key="item" :value="item"></el-option>
                        </el-select>
                        <el-select v-model="selected.size" placeholder="面积"  size ="small">
                            <el-option v-for="item in sizeList" :key="item" :value="item"></el-option>
                        </el-select>
                    </div>
                </div>
                <div id="houseList">
                    <ul id="order">
                        <li v-for="item in orderList" :key="item" >
                            <a  href="#" :class="selected.order===item?'orderActive':''" @click="orderChange(item)">{{item}}</a>
                        </li>
                        <span>附近共搜索到{{houseMsgReady.num}}条房源</span>
                    </ul>
                    <div id="houseContent" ref="houseContent" @scroll="MsgScroll">
                        <div v-for="house in houseMsg" :key="house.id">
                            <a @click="mapChange([house.position_lon,house.position_lat],house.id)">
                                <img :src="house.thumb" :alt="house.name">
                                <div>
                                    <p><span>{{house.name}}</span><span>{{house.price}}元/月</span></p>
                                    <a @click.stop="openFind(house)">请求合租</a>
                                    <ul><li>{{house.size}}㎡</li>|<li>{{house.house_type}}</li></ul>
                                    <p>{{house.location}}</p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="barChange">
            <div id="transfer" v-show="transferShow">
                <div id="transferSearchBar">
                    <i class="el-icon-close" @click="transferShow=false"></i>
                    <i class="el-icon-sort" @click="exchangeTransferPoint" ></i>
                    <i class="el-icon-location"></i>
                    <div>
                        <input type="search" id='origin' v-model="transferPoint.origin.name"   autocomplete="off"  maxlength="15" placeholder="起点">
                        <input type="search" id='destination'  v-model="transferPoint.destination.name"  autocomplete="off"  maxlength="15" placeholder="终点">
                    </div>
                    <span @click="initTransferPoint">清除路线<span class="el-icon-refresh"></span> </span>
                    <button @click="transferSearch(true)">坐公交</button>
                </div>
                <div id="transferResult">
                    <div id="panel"></div>
                </div>
            </div>
        </transition>
        <button id="backHome" @click="$router.go(-1)"><span class="el-icon-back"></span>返回</button>
        <button id="transferBtn" @click="transferShow=!transferShow">{{transferShow?'查找房源':'公交线路'}}</button>
        <findFriend id="findFriend2" :houseMsg="sendToFind" v-if="findFriendShow" @close="closeFind()"></findFriend>
    </div>
</template>

<script>
    import AMap from 'AMap';
    import findFriend from '../components/findFriend.vue';
    export default {
        name: "houseMap",
        data() {
            return {
                api:this.Global.api,
                /*视图显示控制*/
                areaModuleShow:true,
                transferShow:false,
                findFriendShow:false,
                /*合租请求参数*/
                sendToFind:{},
                /*地图参数*/
                mapCenter:[113.27, 23.13],
                houseMap: null,
                clickMarker:new AMap.Marker({
                    position:  '', // 基点位置
                    offset: new AMap.Pixel(-15, -20) // 相对于基点的偏移位置
                }),
                mass: new AMap.MassMarks(this.houseMsgReady,{
                    opacity: 0.8,
                    zIndex: 111,
                    cursor: 'pointer',
                    // zooms:[13,18],
                    style: {
                        url: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                        anchor: new AMap.Pixel(15, 20),
                        size: new AMap.Size(30, 40)
                    }
                }),
                markerHouseId:'',
                transfer : null,
                areaCoordinate:'',
                transferPoint:{
                    origin:{
                        name:'',
                    },
                    destination:{
                        name:''
                    }
                },
                /*房源分类选择*/
                selected:{id:'',area:'', price:'', size:'', order:"默认",keywords:''},
                mapSelected:{southWest:'',northEast:''},
                areaList:[
                    //     {area:"不限",
                    //     lon:113.27,
                    //     lat:23.13
                    // },
                    {
                        area:"天河区",
                        lon:113.355747,
                        lat:23.127191
                    },     {
                        area:"海珠区",
                        lon:113.311916,
                        lat:23.086615
                    },     {
                        area:"白云区",
                        lon:113.267833,
                        lat:23.160687
                    },     {
                        area:"荔湾区",
                        lon:113.238879,
                        lat:23.128594
                    },     {
                        area:"越秀区",
                        lon:113.261503,
                        lat:23.131377
                    },     {
                        area:"黄埔区",
                        lon:113.453780,
                        lat:23.109010
                    },     {
                        area:"番禺区",
                        lon:113.378630,
                        lat:22.938930
                    },   {
                        area:"花都区",
                        lon:113.214859,
                        lat:23.406740
                    },     {
                        area:"萝岗区",
                        lon:113.522366,
                        lat:23.065150
                    }],
                priceList:['不限','1000以下','1000-2000','2000-3000','3000-4000','4000以上'],
                sizeList:['不限','50㎡以下','50㎡-70㎡','70㎡-90㎡','90㎡-120㎡','120㎡以上'],
                orderList:['默认','租金','面积'],

                /*后台数据请求与接收*/
                jsonNextPage:1,
                houseMsg: [],
                houseMsgReady:[],
            }
        },
        components:{
            findFriend
        },
        methods:{
            /*排序改变*/
            orderChange(item) {
                if(!item) return false;
                this.selected.order=item;
            },
            /*房源数据刷新*/
            refreshMsg(data){
                this.$axios.get(this.api+ '/index.php/index/viewHousedata',{params: data}).then(res =>{
                    if(res.status >= 200 && res.status<300){
                        if(res.data.num ===0 ) {
                            this.houseMsgReady=[];
                            this.houseMsgReady.num = res.data.num;
                            this.houseMsg=this.houseMsgReady.slice(0,10);
                            // alert("搜索无结果！请更换条件");
                        }
                        else{
                            this.houseMsgReady=res.data.data;
                            this.houseMsgReady.num = res.data.num;
                            if(this.jsonNextPage===1)this.houseMsg=this.houseMsgReady.slice(0,10);
                        }
                    } else {
                        alert(res.status)
                    }
                    this.$forceUpdate;
                })
            },
            /*房源滚动更新*/
            MsgScroll(){
                let scrollIndex=this.$refs.houseContent.scrollTop+this.$refs.houseContent.offsetHeight;
                let scrollHeight=this.$refs.houseContent.scrollHeight;
                if(scrollIndex>=scrollHeight-10){
                    if(this.houseMsg.length%500 === 0){
                        this.jsonNextPage++;
                        this.refreshMsg(this.JsonData);
                    }
                    this.houseMsg=this.houseMsg.concat(this.houseMsgReady.slice(this.houseMsg.length- (this.jsonNextPage-1)*500,this.houseMsg.length- (this.jsonNextPage-1)*500+10));
                }
            },
            /*地图显示*/
            mapViewChange(){
                /*新建地图*/
                this.houseMap = new AMap.Map('houseMap', {
                    zoom: 12,//级别
                    mapStyle: 'amap://styles/macaron', //设置地图的显示样式
                    center: this.mapCenter,//中心点坐标
                    zooms:[12,18]
                });
                /*新建房源的海量点标记*/
                this.mass.on('mousedown', (e)=> {
                    if(!this.transferShow){
                        this.transfer.clear();
                    }
                    this.markerHouseId = e.data.id;
                });
                this.mass.setMap(this.houseMap);
                /*新建公交实例*/
                this.transfer =new AMap.Transfer ({
                    city: '广州市',
                    panel:'panel',
                    map:this.houseMap,
                    mapStyle: 'amap://styles/1584804eec669b7efc235baecc1f5b8d',
                    policy: AMap.TransferPolicy.LEAST_TIME, //乘车策略
                    autoFitView:true
                });
                let origin = new AMap.Autocomplete({
                    input: "origin",
                    city: '广州市'
                });
                origin.on('select',(res)=>{
                    this.transferPoint.origin=res.poi;
                });
                let destination= new AMap.Autocomplete({
                    input: "destination",
                    city: '广州市'
                });
                destination.on('select',(res)=>{
                    this.transferPoint.destination=res.poi;
                });
                //
                this.houseMap.on('click',()=>{
                    this.markerHouseId='';
                });
                /*区域显示随地图移动而移动*/
                this.areaCoordinate=this.areaCoordinateChange();
                this.houseMap.on('mapmove',()=>{
                    this.areaCoordinate=this.areaCoordinateChange();
                });
                 /*获取地图范围*/
                const getBounds = ()=>{
                    let bounds = this.houseMap.getBounds();
                    const lnglat = this.houseMap.containerToLngLat(new AMap.Pixel(370, 0));
                    this.mapSelected.northEast = bounds.northeast;
                    this.mapSelected.southWest = bounds.southwest;
                    this.mapSelected.southWest.lng=lnglat.lng;
                    // console.log('请求数据的经纬度=>northeast:'+this.mapSelected.northEast,'southWest:'+this.mapSelected.southWest);
                    // console.log('地图容器内范围(px)=>northeastPX:'+this.houseMap.lnglatTocontainer(this.mapSelected.northEast),'southWest:'+this.houseMap.lnglatTocontainer(this.mapSelected.southWest));
                };
                this.houseMap.on('moveend',()=>{
                    getBounds();
                });
                getBounds();
            },
            /*公交查询*/
            transferSearch(){
                this.transfer.search([
                    {keyword: this.transferPoint.origin.name,city:'广州'},
                    {keyword: this.transferPoint.destination.name,city:'广州'}
                ],(status)=>{
                    if(status==='complete'){
                        /*清除地图标记*/
                        this.areaModuleShow = false;
                    }
                });
            },
            /*****设置区域选择器*/
            areaCoordinateChange(){
                let data=[];
                this.areaList.forEach((item)=>{
                    if(item.area !== '不限'){
                        let o = {};
                        o.area=item.area;
                        let pixel= this.houseMap.lngLatToContainer([item.lon,item.lat]);
                        o.style={
                            left: pixel.x+'px',
                            top:pixel.y+'px',
                        };
                        data.push(o);
                    }
                });
                return data;
            },
            /*房源点击地图显示点标记位置*/
            mapChange(location,id){
                /*清除区域选择(无选择则自动选择为'不限'),清除公交线路*/
                this.areaModuleShow = false;
                this.transfer.clear();
                if(!this.selected.area) this.selected.area = '不限';
                /*设置地图中心位置*/
                this.houseMap.setZoomAndCenter(15,location);
                /*逆地理编码 坐标>>地址*/
                /*添加点标记*/
                this.markerHouseId=id;
            },
            /*初始化公交点*/
            initTransferPoint(){this.transfer.clear();this.transferPoint ={origin:{name:'',}, destination:{name:''}}},
            /*交换公交点*/
            exchangeTransferPoint(){[this.transferPoint.origin,this.transferPoint.destination]=[this.transferPoint.destination,this.transferPoint.origin];},
            /*合租传输*/
            openFind(item){
                if(document.cookie.indexOf('login_state=true') === -1)
                {
                    alert('请先登录！')
                }else{
                    this.sendToFind=item;
                    this.findFriendShow= true;
                }
            },
            closeFind(){
                this.sendToFind=null;
                this.findFriendShow=false;
            }
        },
        created(){
        },

        mounted() {
            this.mapViewChange();
            this.refreshMsg({
                leftLongitude : 113.178333,
                leftLatitude : 23.185398,
                rightLongitude : 113.531269,
                rightLatitude : 23.073947,
                houseList: 1,
                nextpage:1,
            });
        },
        computed:{
            /*后台请求数据计算*/
            JsonData(){
                let data = {
                    leftLongitude : 113.178333,
                    leftLatitude : 23.185398,
                    rightLongitude : 113.531269,
                    rightLatitude : 23.073947,
                    houseList: 1,
                    nextpage:1,
                };
                data.area=this.selected.area!=='不限'?this.selected.area.slice(0,2):'';
                data.price = this.selected.price!=='不限'?this.priceList.indexOf(this.selected.price):'';
                data.size= this.selected.size!=='不限'?this.sizeList.indexOf(this.selected.size):'';
                data.keywords=this.selected.keywords;
                data.nextpage =  this.jsonNextPage ;
                if(this.mapSelected.southWest.lng){
                    data.leftLongitude = this.mapSelected.southWest.lng;
                    data.leftLatitude = this.mapSelected.northEast.lat;
                    data.rightLongitude = this.mapSelected.northEast.lng;
                    data.rightLatitude = this.mapSelected.southWest.lat;
                }
                data.houseList = 1;
                switch (this.selected.order) {
                    case '默认':data.house_list = "";break;
                    case '租金':data.house_list = 2;break;
                    case '面积':data.house_list = 4;break;
                    default : break;
                }
                return data;
            },
            /*监听selected对象的area属性*/
            isAreaWatcher(){
                return this.selected.area;
            }
        },
        watch: {
            selected:{
                deep:true,
                handler(){
                    /*恢复默认页数*/
                    this.jsonNextPage = 1;
                    /*清除Id标记点和地图标记*/
                    this.markerHouseId='';
                    this.houseMap.clearMap();
                    this.refreshMsg(this.JsonData);
                }
            },
            mapSelected:{
                deep:true,
                handler(){
                    if(this.areaModuleShow === false)
                    {
                        this.refreshMsg(this.JsonData);
                    }
                }
            },
            isAreaWatcher(){
                this.areaList.forEach((item)=>{
                    this.areaModuleShow = false;
                    if(this.selected.area === item.area){
                        this.houseMap.setZoomAndCenter(14,[item.lon,item.lat]);
                    }
                });
            },
            markerHouseId(){
                if(this.markerHouseId){
                    this.$axios.get(this.api+ '/index.php/index/housedata',{params: {id:this.markerHouseId}}).then(res=>{
                        if(res.status>=200&&res.status<300){
                            let houseData=res.data;
                            /*逆地理编码 坐标>>地址*/
                            const geocoder = new AMap.Geocoder({
                                city: "广州市",
                            });
                            geocoder.getAddress([houseData.position_lon,houseData.position_lat],(status,result)=>{
                                if(status==='complete'){
                                    this.transferPoint.destination.name= result.regeocode.formattedAddress;
                                    this.transferPoint.destination.location=houseData.location;
                                    if(this.transferShow===true)
                                        this.transferSearch(false);
                                }
                            });
                            /*添加房源id所指位置点标记以及房源信息*/
                            let content =`<div class="mapHouseMsg">
                                        <img src="http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png">
                                        <a href="${houseData.pc_url}">
                                        <img src="${houseData.thumb}">
                                        <span>   ${houseData.name} </span>
                                        <span>  ${houseData.price} 元/月</span>
                                   </a>
                                  </div>`;
                            this.clickMarker.setTop(true);
                            this.clickMarker.setContent(content);
                            this.clickMarker.setPosition([houseData.position_lon,houseData.position_lat]);
                            this.houseMap.add(this.clickMarker);
                        }
                    });
                }else{
                    this.houseMap.remove(this.clickMarker);
                }
            },
            houseMsgReady(){
                if(!this.areaModuleShow){
                    // if(!this.transferShow) {
                        /*获取新数据后重新显示房源选中点标记*/
                        if(this.markerHouseId)
                        {
                            this.$axios.get(this.api+ '/index.php/index/housedata',{params: {id:this.markerHouseId}}).then(res=>{
                                if(res.status>=200&&res.status<300){
                                    let houseData= res.data;
                                    let content =`<div class="mapHouseMsg">
                                        <img src="http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png">
                                        <a href="${houseData.pc_url}" target="_blank">
                                        <img src="${houseData.thumb}">
                                        <span>   ${houseData.name} </span>
                                        <span>  ${houseData.price} 元/月</span>
                                   </a>
                                  </div>`;
                                    this.clickMarker.setTop(true);
                                    this.clickMarker.setContent(content);
                                    this.clickMarker.setPosition([houseData.position_lon,houseData.position_lat]);
                                    this.houseMap.add(this.clickMarker);
                                }
                            });
                        }
                        this.mass.setData(this.houseMsgReady);
                    // }
                }
            }
        }
    }
</script>
<style>
    .areaSelector{
        position: absolute;
        z-index: 2;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: white !important;
        user-select:none;
        font-weight: bold;
        border-radius: 50%;
        background-color: #ff0a60;
        opacity: 0.7;
        cursor: pointer;
    }
    .areaSelector:hover{
        opacity: 1;
    }
    .mapHouseMsg{
        display: flex;
        position: absolute;
        z-index: 5;
        /*width: 300px;*/
        height: 100px;
    }
    .mapHouseMsg img{
        width: 30px;
        height: 40px;
    }
    .mapHouseMsg a{
        display: block;
        width: 300px;
        height: 84px;
        border-radius: 10px;
        background-color: white;
    }
    .mapHouseMsg a img{
        display: block;
        float: left;
        width: 70px;
        height: 70px;
        margin: 7px;
    }
    .mapHouseMsg a span{
        display: block;
        width: 200px;
        margin-top: 7px;
        float: left;
    }
    .mapHouseMsg a span:nth-child(2){
        height: 40px;
        overflow: hidden;
    }
    .mapHouseMsg a span:nth-child(3){
        margin-top: 0;
        color: #ff0a60;
        font-size: 1.5em;
        text-align: right;
    }
    .marker-default{
        width: 30px;
        height: 40px;
    }
</style>
<style scoped>
    #findFriend2{
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
        z-index: 3;
        top: 0;
        overflow: auto;
        background-color: rgba(0,0,0,0.5);
    }
    #houseMap{
        position: absolute;
        top:0;
        color: rgb(48, 48, 48);
        width:100vw;
        min-width: 1000px;
        height: 100vh;
    }
    #houseNav{
        position: absolute;
        z-index: 3;
    }
    #searchBar{
        margin: 10px;
        background-color: white;
        width: 350px;
        height: 170px;
        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14);
        -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14);
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14);
    }
    #searchBarContent{
        position: relative;
        top: 15px;
        margin: 15px;
        width: 325px;
    }
    #searchBarContent input{
        text-indent: 0.5em;
        width: 280px;
        height: 35px;
        border: 1px solid #ebebeb;
    }
    #searchBarContent button{
        position: relative;
        top: 2px;
        color: white;
        font-size: large;
        height: 37px;
        width: 37px;
        background-color: #ff0a60;
        border: 1px solid #ff0a60;
    }
    #searchBarContent .el-select{
        width: 95px;
        margin: 15px 15px 0 0;
    }
    #searchBar span{
        position: absolute;
        right: 15px;
        top: 55px;
        font-size: 1.5em;
    }
    #searchBar button:hover{
        filter: opacity(90%);
        cursor: pointer;
    }
    #houseList{
        margin: 10px;
        width: 350px;
        background-color: white;
        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14);
        -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14);
        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14);
    }
    #houseList #order{
        margin-left: 10px;
    }
    #houseList ul span{
        margin-left: 25px;
    }
    #houseList ul li{
        display: inline-block;
        margin: 10px 10px 5px 10px;
    }
    #houseContent{
        margin-left: 15px;
        margin-right: 10px;
        height: calc(100vh - 250px);
        /*min-height: 420px;*/
        overflow-y: scroll;
    }
    #houseContent::-webkit-scrollbar {/*滚动条整体样式*/
        width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
    }
    #houseContent::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
    }
    #houseContent::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1);
    }

    #houseContent a{
        position: relative;
        display: inline-block;
        color: rgba(0,0,0,0.9);
    }
    #houseContent a:hover{
        color: #ff0a60;
        filter: opacity(90%);
    }
    #houseContent a img{
        height: 80px;
        width: 107px;
    }
    #houseContent a div{
        display: inline-block;
        padding-left: 5px;
        width: 190px;
        height: 80px;
        font-size: small;
        margin: 0;
    }
    #houseContent a div p{
        width: 12em;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 1.5em;
        white-space:nowrap;
    }
    #houseContent div p span:nth-child(1){
        display: inline-block;
        width: 7em;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space:nowrap;
    }
    #houseContent a div p span:nth-child(2){
        float: right;
        font-size: 1.2em;
        color: #ff0a60;
    }
    #houseContent a div p:nth-child(1){
        font-size: 15px;
        font-weight: 500;
        width: 13.5em;
        height: auto;
    }
    #houseContent a li{
        margin-top: 5px;
        margin-left: 0;
    }
    #houseContent a div a{
        position: absolute;
        right: 0;
        bottom: 25px;
        margin: 0;
        padding: 2px;
        font-size: 12px;
        color: white;
        background-color: #ff0a60;
        border: 1px solid #ff0a60;
        border-radius: 5px;
    }
    #houseContent a div a:hover{
        color: white;
    }

    #transfer{
        position: absolute;
        z-index: 3;
        cursor: default;
    }
    #transferSearchBar{
        position: relative;
        width: 400px;
        height: 200px;
        margin: 20px 0 0 10px;
        background-color: #ff0a60;
        border-radius: 5px 5px 0 0;
        color: white;
        font-weight: 500 !important;
    }
    #transferSearchBar i{
        font-size: 1.7em;
    }
    #transferSearchBar i:nth-child(1){
        position: absolute;
        right: 10px;
        top: 15px;
        cursor: pointer;
    }
    #transferSearchBar i:nth-child(2){
        position: absolute;
        left: 15px;
        line-height: 200px;
        cursor: pointer;
    }
    #transferSearchBar i:nth-child(3){
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 2.5em;
    }
    #transferSearchBar>div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: 200px;
        margin: 0 auto;
    }
    #transferSearchBar>div input{
        width: 90%;
        height: 40px;
        margin: 7px;
        background-color: #f1095a;
        border: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-indent: 2em;
        color: white;
    }
    #transferSearchBar>div input::-webkit-input-placeholder{
        color: #f3f3f3;
    }
    #transferSearchBar button{
        position: absolute;
        right: 30px;
        bottom: 10px;
        width: 80px;
        height: 35px;
        background-color: rgb(255, 70, 120);
        font-size: 14px;
        color: white;
        border: none;
        border-radius: 2px;
        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.21);
        -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.21);
        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.21);
        cursor: pointer;
    }
    #transferSearchBar button:hover{
        opacity: 0.8;
    }
    #transferSearchBar>span{
        position: absolute;
        left: 55px;
        bottom: 15px;
        cursor: pointer;
    }
    #transferResult{
        width: 400px;
        height: 400px;
        overflow-y: auto;
        margin-left: 10px;
        background-color: white;
        border-radius: 0 0 5px 5px;
        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.21);
        -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.21);
        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.21);

    }
    #transferResult::-webkit-scrollbar {/*滚动条整体样式*/
        width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
    }
    #transferResult::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
    }
    #transferResult::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1);
    }
    .orderActive{
        color: #ff0a60;
    }
    #backHome{
        position:absolute;
        z-index: 1;
        right: 60px;
        top: 30px;
        height: 45px;
        width: 100px;
        font-size: 1.2em;
        background-color: white;
        border: 1px solid #f0f0f0;
        cursor: pointer;
    }
    #transferBtn{
        position:absolute;
        z-index: 1;
        right: 60px;
        top: 80px;
        height: 45px;
        width: 100px;
        color: #ff0a60;
        font-size: 1.2em;
        background-color: white;
        border: 1px solid #f0f0f0;
        cursor: pointer;
    }
    #transferBtn:hover{
        color: rgba(255, 10, 96, 0.49);
    }
    #backHome:hover{
        color: #c8c8c8;
    }
    .barChange-enter-active,.barChange-leave-active{
        /*transition: 0.5s ease;*/
        transition: all 0.5s ease;
    }
    .barChange-enter, .barChange-leave-to /* .fade-leave-active below version 2.1.8 */ {
        -webkit-transform: translateX(-350px);
        -moz-transform: translateX(-350px);
        -ms-transform: translateX(-350px);
        -o-transform: translateX(-350px);
        transform: translateX(-350px);
        opacity: 0.5;
    }

</style>